var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function Point(x, y){
    this.x = x;
    this.y = y;
}

function draw(){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);

    context.strokeStyle = '#000000';
    // 画出x轴和y轴
    context.beginPath();
    context.strokeStyle = '#0000000';
    // 计算出x的起点和终点
    var xStrat = new Point(orgin.x, orgin.y);
    var xEnd = new Point(xStrat.x + xlen, orgin.y);
    var yStrat = new Point(orgin.x, orgin.y - Math.floor(ylen / 2));
    var yEnd = new Point(orgin.x, yStrat.y + ylen);
    context.moveTo(xStrat.x, xStrat.y);
    context.lineTo(xEnd.x, xEnd.y);
    context.moveTo(yStrat.x, yStrat.y);
    context.lineTo(yEnd.x, yEnd.y);
    context.stroke();
    context.closePath();

    // 画出y轴和x轴的箭头。
    var radians = arrowAngle * Math.PI / 180;

    var d = arrowLen * Math.atan(radians);
    context.beginPath();
    context.moveTo(xEnd.x - arrowLen, xEnd.y - d);
    context.lineTo(xEnd.x, xEnd.y);
    context.lineTo(xEnd.x - arrowLen, xEnd.y + d);
    context.moveTo(yStrat.x + d, yStrat.y + arrowLen)
    context.lineTo(yStrat.x, yStrat.y)
    context.lineTo(yStrat.x - d, yStrat.y + arrowLen)
    context.stroke();
    context.closePath();

    // 在90，180， 270， 360处拓展出y轴的虚线
    var dashAngle = [90, 180, 270, 360];
    dashAngle.forEach(function(item){
       // 画出虚线
       context.beginPath();
       context.strokeStyle = 'yellow';
       // 控制虚线
        var times = Math.floor(ylen / 5);
        for (var i = 1; i <= times; i +=2) {
                context.moveTo(yStrat.x + item, yStrat.y + ((i-1) * 5));
                context.lineTo(yStrat.x + item, yStrat.y + (i * 5));
        }
       context.stroke();
       context.closePath();
    });


    context.fillStyle = '#000000';
    // 在坐标轴原点处起始 cos曲线
    context.beginPath();
    var radians = angle * Math.PI/180;
    var x = orgin.x + angle;
    var y = orgin.y - Math.sin(radians) * radious;
    context.arc(x, y, ball.radious, 0, 2 * Math.PI);
    context.fill();
    context.closePath();
    if (recordSin.length < (maxAngle/ speed)) {
        recordSin.push(new Point(x, y));
    }

    // sin曲线
    context.beginPath();
    radians = angle * Math.PI/180;
    y = orgin.y - Math.cos(radians) * radious;
    context.arc(x, y, ball.radious, 0, 2 * Math.PI);
    context.fill();
    context.closePath();
    if (recordCos.length < (maxAngle / speed)) {
        recordCos.push(new Point(x, y));
    }

    // 画出轨迹
    for (var i = 0, len = recordSin.length; i < len; i++) {

        context.fillStyle = 'green';
        context.beginPath();
        context.arc(recordSin[i].x, recordSin[i].y, 1, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
        context.beginPath();
        context.arc(recordCos[i].x, recordCos[i].y, 1, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
    }

    angle += speed;
    if (angle > maxAngle || angle < 0) {
        speed = - speed;
    }
}

// 直角坐标轴的原点
var orgin = new Point(20, 250);
// x轴的长度
var xlen = 400;
// y轴的长度
var ylen = 400;
// 余弦的圆半径的长
var radious = 90;
// 初始角度
var angle = 0;
// 最大角度
var maxAngle = 360;
// 速度
var speed = 3;
// 运动的圆的半径
var ball = {
    radious: 8,
};

// 存放轨迹
var recordSin = [];
var recordCos = [];
// 箭头的角度。
var arrowAngle = 30;
var arrowLen = 10;

(function(){
    // 刷新的频率，毫秒
    window.setInterval("draw()", 50);

    // draw();
})();